<!--我的楼书-->
<template>
  <div class="brochure">
    <!--我的楼书头部-->
    <div v-if="brochure">
      <div class="brochure-header">
        <el-button type="primary" @click="brochureclick(false);">创建楼书</el-button>
        <div class="search">
          <div class="search-input">
            <el-input
              placeholder="请输入搜索内容…"
              prefix-icon="el-icon-search"
              v-model="brochureForm.keyword"
            ></el-input>
          </div>
          <div class="search-bt">
            <el-button type="primary" @click="myBrochure()">搜索</el-button>
          </div>
        </div>
      </div>
      <!--我的楼书表格-->
      <div class="brochure-cont">
        <div class="brochure-table">
          <el-table
            :data="brochureList"
            style="width: 100%;"
            :header-cell-style="{color:'#98A9BC'}"
            @sort-change="timeSort"
          >
            <el-table-column label="序号" align="center" type="index" min-width="5%"></el-table-column>
            <el-table-column label="楼书标题" align="center" prop="title" min-width="15%"></el-table-column>
            <el-table-column
              label="创建时间"
              sortable="custom"
              align="center"
              prop="createTime"
              min-width="20%"
            ></el-table-column>
            <el-table-column label="首次发送时间" align="center" prop="firstReleaseTime" min-width="20%"></el-table-column>
            <el-table-column label="浏览次数" align="center" prop="visitsNum" min-width="10%"></el-table-column>
            <el-table-column label="操作" align="center" min-width="30%">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="changeBrochure(scope.row)">编辑</el-button>
                <el-button type="text" size="mini" @click="delBrochure(scope.row)">删除</el-button>
                <!-- <router-link to="/Share"> -->
                <el-button type="text" size="mini" @click="housepreview(scope.row)">预览</el-button>
                <!-- </router-link> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="brochure-page">
          <el-pagination
            @size-change="(val) => {brochureForm.size=val;myBrochure()}"
            @current-change="(val) => {brochureForm.page=val;myBrochure()}"
            background
            :page-sizes="[10, 20, 30, 40]"
            :page-size="brochureForm.size"
            :current-page.sync="brochureForm.page"
            layout="total, sizes, prev, pager, next"
            :total="brochureTotal"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!--我的楼书创建-->
    <div class="brochure-add" v-if="brochurechuangjian">
      <div class="brochure-add-title">
        <div class="brochure-add-title-tianjia" @click="brochuretianjia">已添加房源</div>
        <!--<div class="brochure-add-title-liulan">浏览我的 房源</div>-->
        <!-- <div class="search">
        <div class="search-input"><el-input placeholder="请输入搜索内容…" prefix-icon="el-icon-search" v-model="input"></el-input></div>
        <div class="search-bt"><el-button type="primary">搜索</el-button></div>
        </div>-->
      </div>
      <div>
        <el-tabs v-model="activeName" style="width:90%;margin:0 auto;">
          <el-tab-pane label="楼盘房源" name="building" v-if="isHouse">
            <div class="brochure-floor-center" style="padding-bottom:100px;">
              <div
                class="brochure-floor-list"
                v-if="item.type==1"
                v-for="(item,index) in checkedList"
                :key="item.id"
              >
                <div class="brochure-floor-list-img">
                  <img :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:imgDefault">
                </div>
                <div class="brochure-floor-list-title">
                  {{item.buildingName}} | {{item.area}}平米
                  <span
                    v-show="item.floorNo!=null"
                  >| {{item.floorNo}}层</span>
                </div>
                <div class="brochure-floor-bt">
                  <div class="brochure-floor-bt-title">
                    <span>{{(item.price*item.area*365/120000).toFixed(3)}}</span>万元/月
                  </div>
                  <div class="brochure-floor-bt-title">
                    <span>{{item.price}}</span>平米/月
                  </div>
                  <!-- <div class="brochure-floor-bt-img">
              <img src="../assets/images/icon_add.png">
                  </div>-->
                  <div class="brochure-floor-bt-img" @click="checkedList.splice(index,1)">
                    <img src="../assets/images/icon_delete.png">
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="联合办公社区" name="community" v-if="isCommunity">
            <div class="brochure-floor-center" style="padding-bottom:100px;">
              <div
                class="follow-union-list"
                v-if="item.type==2"
                v-for="(item,index) in checkedList"
                :key="index"
              >
                <div class="follow-union-list-left">
                  <img :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:imgDefault">
                </div>
                <div class="follow-union-list-right">
                  <div class="follow-union-list-title">{{item.communityName}}</div>
                  <div class="follow-union-list-num">
                    开放式工位：
                    <span>{{item.spacePrice}}</span> 元/月
                  </div>
                  <div class="follow-union-list-num">
                    独立办公室：
                    <span>{{item.officePrice}}</span> 元·间/月
                  </div>
                  <!-- <div class="follow-union-list-bt">
                <div class="follow-union-list-img">
                  <img src="../assets/images/icon_delete.png">
                </div>
                  </div>-->
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div class="brochure-floor-footer">
        <el-button
          type="primary"
          style="padding: 10px 50px;"
          @click="createBrochure"
          v-show="!isUpdate"
        >确定</el-button>
        <el-button
          type="primary"
          style="padding: 10px 50px;"
          @click="updateBrochure"
          v-show="isUpdate"
        >确定</el-button>
        <el-button
          style="padding: 10px 35px; margin-left: 25px;"
          @click="brochurechuangjianreturn"
        >返回我的楼书</el-button>
        <!-- <router-link to="/Share">
          <el-button type="primary" style="padding: 10px 50px; margin-left: 25px;">预览</el-button>
        </router-link>-->
      </div>
    </div>
    <!--我的楼书添加-->
    <div class="brochure-add" v-if="brochureadd">
      <div class="brochure-add-title">
        <div class="brochure-add-title-input">
          <div class="brochure-add-title-text">楼书标题</div>
          <el-input placeholder="请输入楼书标题" v-model="createForm.brochurName" v-if="!isUpdate"></el-input>
          <el-input placeholder="请输入楼书标题" v-model="updateBrochureForm.brochurName" v-if="isUpdate"></el-input>
        </div>
        <!-- <div class="search"> -->
        <!-- <div class="search-input"><el-input placeholder="请输入搜索内容…" prefix-icon="el-icon-search" v-model="input"></el-input></div>
        <div class="search-bt"><el-button type="primary">搜索</el-button></div>
        </div>-->
      </div>
      <div class="brochure-floor-footer">
        <el-button
          type="primary"
          style="padding: 10px 20px;"
          @click="brochuretianjia"
          v-show="!isUpdate"
        >添加房源</el-button>
        <el-button
          type="primary"
          style="padding: 10px 20px;"
          @click="updateBrochureName"
          v-show="isUpdate"
        >下一步</el-button>
        <el-button style="padding: 10px 30px;margin-left:10px;" @click="brochurechuangjianreturn">返回</el-button>
      </div>
    </div>
    <!--我的楼书浏览-->
    <div class="brochure-browse" v-if="brochurebrowse">
      <div class="brochure-browse-title">
        <div class="brochure-browse-title-text">浏览我的房源</div>
        <div class="brochure-tab">
          <div
            v-show="userInfo && userInfo.companyType != -1"
            @click="cur=1"
            class="brochure-tab-list"
            :class="{active:cur==1}"
          >发布的房源</div>

          <div
            v-show="userInfo && userInfo.companyType != 1 && userInfo.companyType != 2"
            @click="cur=0;"
            class="brochure-tab-list"
            :class="{active:cur==0}"
          >收藏的房源</div>
          <div @click="cur=2" class="brochure-tab-list" :class="{active:cur==2}">关注的联合办公</div>
        </div>
      </div>
      <div class="brochure-list" v-show="cur==0">
        <div class="brochure-floor-center">
          <div class="brochureestablishcont" v-for="(item,index) in collectList" :key="index">
            <div class="brochure-floor-list">
              <div @click="select(collectList,index,item,1,item.houseId)">
                <div class="brochurecont-pt-not" v-if="!item.checked"></div>
                <div class="brochurecont-pt-suceess" v-if="item.checked"></div>
              </div>
              <div class="brochure-floor-list-img">
                <img :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:imgDefault">
              </div>
              <div class="brochure-floor-list-title">
               {{item.houseTitle}}
              </div>
              <div class="brochure-floor-list-title">上架：{{item.publishTime}}</div>
              <div class="brochure-floor-bt">
                <!-- <div class="brochure-floor-bt-liulan">浏览量38</div> -->
                <div class="brochure-floor-bt-title">
                  <span>{{item.price}}</span>元/m²·天
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="brochure-list" v-show="cur==1">
        <div class="brochure-floor-center">
          <div class="brochureestablishcont" v-for="(item,index) in releaseList" :key="index">
            <div class="brochure-floor-list">
              <div @click="select(releaseList,index,item,1,item.houseId)">
                <div class="brochurecont-pt-not" v-if="!item.checked"></div>
                <div class="brochurecont-pt-suceess" v-if="item.checked"></div>
              </div>
              <div class="brochure-floor-list-img">
                <img :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:imgDefault">
              </div>
              <div class="brochure-floor-list-title">
                {{item.houseTitle}}
              </div>
              <div class="brochure-floor-list-title">上架：{{item.publishTime}}</div>
              <div class="brochure-floor-bt">
                <!-- <div class="brochure-floor-bt-liulan">浏览量38</div> -->
                <div class="brochure-floor-bt-title">
                  <span>{{item.price}}</span>元/m²·天
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="brochure-list" v-show="cur==2">
        <div class="brochure-floor-center">
          <div class="follow-union-list" v-for="(item,index) in communityList" :key="index">
            <div class="follow-union-list-left">
              <img :src="item.imgUrl?`${locationUrl}${item.imgUrl}`:imgDefault">
            </div>
            <div class="follow-union-list-right">
              <div @click="select(communityList,index,item,2,item.communityId)">
                <div class="brochurecont-pt-not" v-if="!item.checked"></div>
                <div class="brochurecont-pt-suceess" v-if="item.checked"></div>
              </div>
              <div class="follow-union-list-title">{{item.communityName}}</div>
              <div class="follow-union-list-num">
                开放式工位：
                <span>{{item.spacePrice}}</span> 元/月
              </div>
              <div class="follow-union-list-num">
                独立办公室：
                <span>{{item.officePrice}}</span> 元·间/月
              </div>
              <!-- <div class="follow-union-list-bt">
                <div class="follow-union-list-img">
                  <img src="../assets/images/icon_delete.png">
                </div>
              </div>-->
            </div>
          </div>
        </div>
      </div>
      <div class="brochure-floor-footer">
        <el-button
          type="primary"
          style="padding: 10px 45px;margin-right:20px;"
          @click="brochurebrowsetianjia"
        >确定添加</el-button>
        <el-button style="padding: 10px 30px;" @click="brochurechuangjianreturn">返回我的楼书</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import * as brochureAPI from "@/api/brochure";
import * as publicAPI from "@/api/public";
import * as collectAPI from "@/api/collect";
import * as attentionAPI from "@/api/attention";
import * as houseAPI from "@/api/house";
export default {
  name: "Brochure",
  data() {
    return {
      //参数
      brochureForm: {
        page: 1,
        size: 10,
        time: 1,
        keyword: ""
      },
      createForm: {
        houseList: []
      },
      userInfo: {},
      updateBrochureForm: {
        brochurName: "",
        brochurId: ""
      },
      activeName: "building", //tab名称
      checkedList: [],
      isCreate: 0, //0为创建 1为编辑
      brochureList: [], //楼书列表
      brochureName: "", //楼书标题
      brochureTotal: 0,
      collectList: [], //收藏的房源列表
      releaseList: [], //发布的楼盘房源列表
      communityList: [], //关注的联合办公
      isUpdate: false, //是否更新房源、
      brochureHouse: [], // 楼书下楼盘房源列表
      brochureCommunity: [], // 楼书下联合办公
      collectForm: {
        totalPrices: "0",
        area: "0",
        prices: "0",
        page: "1",
        size: "60"
      }, //收藏房源参数
      releaseForm: {
        houseStatus: 1,
        keyword: "",
        page: 1,
        size: 40
      },
      isHouse: false,
      isCommunity: false,
      brochure: true,
      brochureadd: false,
      brochurechuangjian: false,
      brochurebrowse: false,
      cur: 1,
      selected: "1",
      tableData: []
    };
  },
  created() {
    if (localStorage.userInfo) {
      this.userInfo = JSON.parse(localStorage.userInfo);
    }
    if (this.$route.query.index == "index") {
      this.brochureclick(false);
    } else if (this.$route.query.index == "editor") {
      this.changeBrochure(this.$route.query.row);
    }
    this.myBrochure();
  },
  methods: {
    // 我的楼书列表
    myBrochure() {
      this.brochureList = [];
      brochureAPI.getBuildBookList(this.brochureForm).then(response => {
        if (response.data) {
          this.brochureTotal = response.data.total;
          let arr = response.data.list;
          arr.forEach((item, ind) => {
            publicAPI.countVisit({ type: 7, id: item.id }).then(data => {
              item.visitsNum = data.data;
              this.brochureList.push(item);
            });
          });
        }
      });
    },
    // 删除楼书
    delBrochure(row) {
      this.$confirm("确定删除此楼书?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        brochureAPI
          .deleteBrochur({ brochureId: row.id })
          .then(response => {
            this.myBrochure();
            this.$message.success("删除成功");
          })
          .catch(err => {
            this.$message.error("删除失败，请重试！");
            console.log("删除楼书=====>", err);
          });
      });
    },
    // 获取收藏的房源
    getCollection() {
      collectAPI
        .collection(this.collectForm)
        .then(response => {
          this.collectList = response.data.rows;
        })
        .catch(err => {
          console.log("收藏的房源====>", err);
        });
    },
    // 获取发布的楼盘房源
    getReleaseHouse() {
      this.cur = 1;
      houseAPI
        .getReleaseHouse(this.releaseForm)
        .then(response => {
          this.releaseList = response.data.list;
        })
        .catch(err => {
          console.log("发布的楼盘房源列表=====>", err);
        });
    },
    // 获取关注的联合办公
    getAttentionCommunity() {
      this.cur = 2;
      attentionAPI
        .getAttentionCommunity({ keyword: "" })
        .then(response => {
          this.communityList = response.data;
        })
        .catch(err => {
          console.log("关注的楼盘列表=====>", err);
        });
    },
    // 获取楼书下房源列表
    getHousingList() {
      this.brochureHouse = [];
      brochureAPI
        .getHousingList({ brochureId: this.updateBrochureForm.brochurId })
        .then(response => {
          response.data.forEach(element => {
            this.brochureHouse.push(element);
          });
        })
        .catch(err => {
          console.log("编辑楼书接口", err);
        });
    },
    // 获取楼书下联合办公列表
    getCommunityList() {
      this.brochureCommunity = [];
      brochureAPI
        .getCommunityList({ brochureId: this.updateBrochureForm.brochurId })
        .then(response => {
          // this.brochureCommunity = response.data;
          response.data.forEach(element => {
            this.brochureCommunity.push(element);
          });
        })
        .catch(err => {
          console.log("编辑楼书接口");
        });
    },
    select(arr, index, item, type, id) {
      //1 房源 2 社区
      if (!item.id) item.id = id;
      if (!item.type) item.type = type;
      if (arr[index].checked == undefined) {
        this.$set(arr[index], "checked", true);
        this.checkedList.push(item);
      } else {
        arr[index].checked = !arr[index].checked;
        if (arr[index].checked == true) {
          if (this.checkedList.indexOf(item) < 0) {
            this.checkedList.push(item);
          }
        } else {
          for (let key = 0; key < this.checkedList.length; key++) {
            if (
              this.checkedList[key].id == id &&
              this.checkedList[key].type == type
            ) {
              this.checkedList.splice(key, 1);
              key -= 1;
            }
          }
        }
      }
    },

    //转发并预览
    housepreview(row) {
      // console.log(row)
      this.$router.push({ path: "/Share", query: row });
    },
    // 创建楼书
    createBrochure() {
      this.$confirm("确定创建此楼书?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.createForm.houseList = this.checkedList;
        brochureAPI
          .createBrochure(this.createForm)
          .then(response => {
            if (response.code == "200") {
              this.$message.success("创建成功");
              this.brochurechuangjianreturn();
              this.myBrochure();
              this.updateBrochureForm = new Object();
              this.createForm = new Object();
              this.checkedList = [];
            }
          })
          .catch(err => {
            this.$message.error("创建失败，请重试！");
            console.log("创建楼书======>", err);
          });
      });
    },
    // 编辑
    changeBrochure(row) {
      this.brochureclick(true);
      // setTimeout(() => {
      this.updateBrochureForm.brochurName = row.title;
      this.updateBrochureForm.brochurId = row.id;
      this.getCollection();
      this.getAttentionCommunity();
      this.getReleaseHouse();
      this.getHousingList();
      this.getCommunityList();
      // }, 500);
    },
    // 添加选中
    updateBrochureName() {
      this.isUpdate = true;
      this.collectList.forEach((element, ind) => {
        this.brochureHouse.forEach(item => {
          if (element.houseId == item.houseId) {
            this.select(this.collectList, ind, element, "1", element.houseId);
          }
        });
      });
      this.releaseList.forEach((element, ind) => {
        this.brochureHouse.forEach(item => {
          if (element.houseId == item.houseId) {
            this.select(this.releaseList, ind, element, "1", element.houseId);
          }
        });
      });
      this.communityList.forEach((element, ind) => {
        this.brochureCommunity.forEach(item => {
          if (element.communityId == item.communityId) {
            this.select(
              this.communityList,
              ind,
              element,
              "2",
              element.communityId
            );
          }
        });
      });
      (this.brochure = false),
        (this.brochureadd = false),
        (this.brochurebrowse = true),
        (this.brochurechuangjian = false);
    },
    // 修改楼书
    updateBrochure() {
      this.$confirm("确定更新此楼书?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.updateBrochureForm.houseList = this.checkedList;
        brochureAPI
          .updateBrochure(this.updateBrochureForm)
          .then(response => {
            if (response.code == "200") {
              this.brochurechuangjianreturn();
              this.myBrochure();
              this.updateBrochureForm = new Object();
              this.createForm = new Object();
              this.checkedList = [];
            }
          })
          .catch(err => {
            this.$message.error("更新失败，请重试！");

            console.log("创建楼书======>", err);
          });
      });
    },
    // 楼书排序
    timeSort(row) {
      if (row.order == "ascending") {
        this.brochureForm.time = "0";
      } else if (row.order == "descending") {
        this.brochureForm.time = "1";
      } else {
        // this.brochureForm.time = "";
      }
      this.myBrochure();
    },
    brochureclick(type) {
      this.isUpdate = type;
      this.isHouse = false;
      this.isCommunity = false;
      setTimeout(() => {
        (this.brochure = false),
          (this.brochureadd = true),
          (this.brochurebrowse = false),
          (this.brochurechuangjian = false);
      }, 300);
    },
    // 添加房源
    brochuretianjia() {
      if (
        this.createForm.brochurName == "" ||
        this.createForm.brochurName == undefined
      ) {
        this.$message.warning("楼书标题不可为空");
      } else {
        this.getCollection();
        this.getAttentionCommunity();
        this.getReleaseHouse();
        if (this.userInfo && this.userInfo.companyType == -1) {
          this.cur = 0;
        }
        (this.brochure = false),
          (this.brochureadd = false),
          (this.brochurebrowse = true),
          (this.brochurechuangjian = false);
      }
    },
    // 添加房源
    brochurebrowsetianjia() {
      console.log("浏览1", this.checkedList);
      if (this.checkedList.length <= 0) {
        this.$message.warning("您还未添加房源");
        return;
      } else if (this.checkedList.length > 20) {
        this.$message.warning("最多添加20个房源信息！");
        return;
      }
      let arr = this.checkedList;
      console.log(this.checkedList);
      this.checkedList.forEach(element => {
        if (element.type == "1") {
          this.isHouse = true;
          this.activeName = "building";
        } else {
          if (this.isHouse) {
            this.activeName = "building";
          } else {
            this.activeName = "community";
          }
          this.isCommunity = true;
        }
      });
      this.cur = 1;
      (this.brochure = false),
        (this.brochureadd = false),
        (this.brochurebrowse = false),
        (this.brochurechuangjian = true);
    },
    brochurechuangjianreturn() {
      this.checkedList = [];
      this.brochureForm.brochurName = "";
      this.createForm.brochurName = "";
      this.updateBrochureForm.brochurName = "";
      (this.brochure = true),
        (this.brochureadd = false),
        (this.brochurebrowse = false),
        (this.brochurechuangjian = false);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.brochure {
  padding: 25px;
  height: auto;
  overflow: auto;
}
/*我的楼书头部搜索样式*/
.brochure-header {
  display: flex;
  padding: 30px 45px 10px 45px;
  background: #ffffff;
  position: relative;
}
/*我的楼书表格样式*/
.brochure-cont {
  background: #ffffff;
  padding: 30px 30px;
}
.brochure-table {
  border: 1px solid #ebeef5;
  border-bottom: none;
}
.brochure-page {
  display: flex;
  justify-content: center;
  padding: 35px 0 15px 0;
}
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #009fe8;
}
/*我的楼书创建*/
.brochure-add {
  background: #ffffff;
}
.brochure-add-title {
  display: flex;
  align-items: center;
  padding: 30px 45px 10px 45px;
  position: relative;
}
.brochure-add-title-tianjia {
  color: #778ca2;
  font-size: 14px;
}
.brochure-add-title-liulan {
  background: #edf9ff;
  border-radius: 4px;
  font-size: 12px;
  color: #009fe8;
  padding: 6px 10px;
  margin-left: 15px;
}
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  top: 25px;
  right: 45px;
}
.search-bt {
  margin-left: 15px;
}
.brochure-add-title-input {
  display: flex;
}
.brochure-add-title-text {
  width: 100px;
  color: #778ca2;
  font-size: 14px;
  line-height: 40px;
}
.brochure-floor-center {
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 0 10px 0 40px;
  background: #ffffff;
}
.brochure-floor-list {
  width: 255px;
  border-radius: 10px;
  position: relative;
  background: #ffffff;
  margin-right: 15px;
  margin-bottom: 35px;
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1);
}
.brochure-floor-list-img > img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 170px;
}
.brochure-floor-list-title {
  width:85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #333333;
  font-size: 12px;
  margin-top: 10px;
  padding: 0 15px;

}
.brochure-floor-bt {
  display: flex;
  padding: 10px 15px;
  align-items: center;
  justify-content: space-between;
}
.brochure-floor-bt-title {
  color: #666666;
  font-size: 12px;
  margin-right: 8px;
}
.brochure-floor-bt-title > span {
  color: #39b4ff;
  font-size: 16px;
}
.brochure-floor-bt-img {
  width: 20px;
  height: 20px;
}
.brochure-floor-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
}
.brochure-floor-bt-liulan {
  font-size: 10px;
  color: #778ca2;
}
/*我的楼书浏览*/
.brochure-browse {
  background: #ffffff;
}
.brochure-browse-title {
}
.brochure-browse-title-text {
  font-size: 14px;
  color: #778ca2;
  padding: 30px 30px 10px 30px;
}
.brochure-tab {
  display: flex;
  padding: 15px 0;
  background: #ffffff;
  position: relative;
}
.brochure-tab-list {
  cursor: pointer;
  width: 150px;
  text-align: center;
  color: #778ca2;
  font-size: 14px;
}
.brochure-tab .active {
  color: #009fe8;
}
.brochure-tab .active:after {
  content: "";
  width: 80px;
  height: 2px;
  margin: 5px auto;
  display: block;
  background: #009fe8;
}
.brochurecont-pt-not {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #666;
  background: f3f3f3;
}
.brochurecont-pt-suceess {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: url("../assets/images/icon_selecte.png") no-repeat;
  background-size: 100% 100%;
  border: 1px solid #37b3ff;
}
.follow-union-list {
  background: #ffffff;
  margin-right: 15px;
  margin-top: 25px;
  display: flex;
  border-radius: 10px;
  box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, 0.1);
}
.follow-union-list-left {
  width: 195px;
  height: 170px;
  padding-right: 20px;
  float: left;
}
.follow-union-list-left > img {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  height: 100%;
}
.follow-union-list-right {
  width: 195px;
  height: 170px;
  padding-right: 20px;
  position: relative;
}
.follow-union-list-title {
  width: 100%;
  padding-top: 30px;
  color: #333333;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.follow-union-list-num {
  padding-top: 12px;
  color: #666666;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.follow-union-list-num > span {
  color: #39b4ff;
  font-size: 16px;
}
.follow-union-list-bt {
  display: flex;
  justify-content: space-between;
  padding-top: 15px;
}
.follow-union-list-l {
  font-size: 12px;
  color: #009fe8;
  margin-right: 20px;
}
.follow-union-list-img {
  width: 20px;
  height: 20px;
}
</style>
